<template>
  <div>
    <ul>
      <li v-for="m of messageList" :key="m.id">
        <!-- (1) 路由跳转并携带参数 ---------------------- to的字符串写法(只能携带较少参数-不推荐)
             这里需要用到字符串里混着js表达式:
             :表示后面都是js表达式----允许有js表达式
             而``里面一个整体代表一个js表达式，并且
             里面还可以有字符串和js表达式，只不过这个js表达式是需要用${}来实现
             本质上就是 借用的``可以混着写的特点，又因为``是js表达式，所以to要加:
        -->
        <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{
          m.title
        }}</router-link> -->

        <!-- (2) 路由跳转并携带query参数 ---------------------- to的对象写法(更加清晰-推荐) -->
        <!-- <router-link
          :to="{
            name:'detail',
            query: { 
              id: m.id, 
              title: m.title 
            },
          }"
          >{{ m.title }}</router-link
        > -->
        <!-- (3) 路由跳转并携带params参数 --------------------- 第一种方法反而清晰一些
                 使用第二种方法时必须写name属性不能写path，估计不管query还是params都建议name属性
             (4) query和params都可以在路由中传递参数，一个是把属性名写在路径中，还有一个是提前写在路由器中
                 ，我还是params吧，如果参数不多就用字符串写法，多就用对象写法
              -->
        <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{
          m.title
        }}</router-link> -->
        <router-link
          :to="{
            name:'detail',
            params: { 
              id: m.id, 
              title: m.title 
            },
          }"
          >{{ m.title }}</router-link
        >
      </li>
    </ul>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "myMessage",
  data() {
    return {
      messageList: [
        { id: "001", title: "消息001" },
        { id: "002", title: "消息002" },
        { id: "003", title: "消息003" },
      ],
    };
  },
};
</script>

<style></style>
